@import "/src/styles/variables";

.hot-tags-container {
  margin-bottom: $marginBottomTags;
  @include tagsBasicStyle;

  &:hover ::after {
    width: 70px;
  }
  h2 {
    @include hotTagsH2;
  }

  ul {
    font-size: 14px;
    @include clearfix;

    li {
      float: left;
      color: #FFF;
      padding: 3px 11px;
      margin: 10px 10px 0 0;
      border-radius: 8px;
      @include transitionStyle;

      &:nth-child(8n-7) {
        background: $tagColor;
      }

      &:nth-child(8n-6) {
        background: $tagColor2;
      }

      &:nth-child(8n-5) {
        background: $tagColor3;
      }

      &:nth-child(8n-4) {
        background: $tagColor4;
      }

      &:nth-child(8n-3) {
        background: $tagColor5;
      }

      &:nth-child(8n-2) {
        background: $tagColor6;
      }

      &:nth-child(8n-1) {
        background: $tagColor7;
      }

      &:nth-child(8n) {
        background: $tagColor8;
      }

      &:first-child {
        background: $tagColor9;
      }

      &:last-child {
        background: $tagColor10;
      }

      &:hover {
        cursor: pointer;
        border-radius: 0;
        text-shadow: #000 1px 1px 1px
      }
    }
  }
}
